<template>
	<view class="btn " :style="{padding:padd,border,margin,background,transform:isTouch?'scale(0.7)':'scale(1)',background:checked?'pink':'#fff0f0'}" @touchstart="start">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "x-btn",
		props:{
			checked:{
				default:false
			},
			padd:{
				default:'20rpx'
			},
			border:{
				default:'2px solid #b18597'
			},
			margin:{
				default:'0rpx'
			},
			background:{
				default:'#fff0f0'
			},
		},
		data() {
			return {
				isTouch: false
			};
		},
		methods: {
			start() {
				this.isTouch = true
				setTimeout(() => {
					this.isTouch = false
				}, 300)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.btn {
		width: max-content;
		font-weight: 600;
		color: #382b22;
		text-transform: uppercase;
		background: #fff0f0;
		// border: 2px solid #b18597;
		border-radius: 0.75em;
		transform-style: preserve-3d;
		transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);

		// &:active {
		// 	background: #ffe9e9;
		// 	transform: translate(0, 15rpx);
		// }
	}
</style>